<template>
  <div style="padding: 0 15px">
    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              SPU台账
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus"
              @click="handleAddSpu"
            >新增SPU</el-button>
            <!-- <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus"
              @click="$router.push('/spu/step1')"
            >新增SPU</el-button> -->
            <el-button
              size="small"
              type="primary"
              icon="el-icon-download"
            >台账下载</el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-upload2"
            >台账导入</el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-tickets"
            >操作记录</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="divider" />
      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品名称</p>
            <el-input
              v-model="queryParam.name"
              size="small"
              placeholder="商品名称"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品编号</p>
            <el-input
              v-model="queryParam.typeNumber"
              size="small"
              placeholder="商品编号"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品类别</p>
            <el-input
              v-model="queryParam.categoryName"
              size="small"
              placeholder="商品类别"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品品牌</p>
            <el-input
              v-model="queryParam.brandName"
              size="small"
              placeholder="商品品牌"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">上架状态</p>
            <el-select
              v-model="queryParam.isPublished"
              size="small"
              placeholder="上架状态"
            >
              <el-option label="已上架" value="1" />
              <el-option label="未上架" value="0" />
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品标签</p>
            <el-input
              v-model="queryParam.tags"
              size="small"
              placeholder="商品标签"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品库存（小于等于）</p>
            <el-input
              v-model="queryParam.stock"
              size="small"
              placeholder="商品库存"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">审核状态</p>
            <el-select
              v-model="queryParam.isChecked"
              size="small"
              placeholder="审核状态"
            >
              <el-option label="已审核" value="1" />
              <el-option label="未审核" value="0" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品状态</p>
            <el-select
              v-model="queryParam.isDeleted"
              size="small"
              placeholder="商品状态"
            >
              <el-option label="已删除" value="1" />
              <el-option label="未删除" value="0" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">新品</p>
            <el-select
              v-model="queryParam.isNewArrival"
              size="small"
              placeholder="新品"
            >
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="loadSpuList">查询</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table
      ref="multipleTable"
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="编号" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="封面图片" width="130">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="`${BASE_URL}${scope.row.pictures.split(',')[0]}`"
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="价格"
        width="80"
        :sort-method="handleSortChange"
      >
        <template slot-scope="scope">{{ scope.row.listPrice }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="货号"
        width="80"
        :sort-method="handleSortChange"
      >
        <template slot-scope="scope">{{ scope.row.typeNumber }}</template>
      </el-table-column>
      <el-table-column align="center" label="标签" width="120">
        <template slot-scope="scope">
          <p>
            上架：<el-switch
              v-model="scope.row.isPublished"
              active-color="#1aa"
              inactive-color="#aaa"
            />
          </p>
          <p>
            推荐：<el-switch
              v-model="scope.row.isRecommend"
              active-color="#1aa"
              inactive-color="#aaa"
            />
          </p>
          <p>
            新品：<el-switch
              v-model="scope.row.isNewArrival"
              active-color="#1aa"
              inactive-color="#aaa"
            />
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column align="center" label="SKU设置" width="100">
        <template slot-scope="scope">
          <router-link :to="`/home/product/skumanage/${scope.row.id}`">
            <el-button type="primary" icon="el-icon-coin" circle />
          </router-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量/库存" width="120">
        <template slot-scope="scope">
          <p>{{ scope.row.sales }}/{{ scope.row.stock }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" width="100">
        <template slot-scope="scope">{{
          scope.row.isChecked == 1 ? "已审核" : "未审核"
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            title="查看"
            type="primary"
            size="mini"
            icon="el-icon-view"
            circle
            @click="$router.push('#' + scope.row.id)"
          />
          <el-button
            title="编辑"
            type="warning"
            size="mini"
            icon="el-icon-edit"
            circle
            @click="$router.push('#' + scope.row.id)"
          />
          <el-button
            title="删除"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            @click="$router.push('#' + scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import * as api from '@/api/spu'
import LocalStorage from '@/utils/StorageUtils.js'
export default {
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API.substring(0, process.env.VUE_APP_BASE_API.length - 1),
      currentPage: 1, // 表示当前页码
      pageSize: 10, // 表示每页多少条
      total: 1, // 表示总条目数
      pages: 1, // 表示总页数
      input: '',
      queryParam: {
        name: '', // 商品名称
        typeNumber: '', // 商品编号
        categoryName: '', // 商品分类
        brandName: '', // 商品品牌
        isPublished: '', // 是否上架
        tags: '', // 商品标签
        stock: '', // 库存
        isChecked: '', // 审核状态
        isDeleted: '', // 删除状态
        isNewArrival: '', // 是否新品
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: []
    }
  },

  mounted() {
    this.loadSpuList()
  },

  methods: {
    loadSpuList() {
      const pageNum = this.currentPage
      const pageSize = this.pageSize
      this.queryParam.pageNum = pageNum
      this.queryParam.pageSize = pageSize
      api.getList(this.queryParam).then((res) => {
        console.log(res)
        const pagedVO = res.data
        this.tableData = pagedVO.data
        this.total = pagedVO.total
        this.pages = pagedVO.pages
        this.pageNum = pagedVO.pageNum
        this.pageSize = pagedVO.pageSize
      })
    },

    handleCurrentChange(val) {
      console.log(`即将加载选中页: 第${val}页`)
      this.currentPage = val
      // this.loadSpuList()
    },

    handleSortChange(a, b) {
      return a.price - b.price
    },
    handleAddSpu() {
      console.log('添加SPU')
      // 检查缓存中是否有SPU数据, 如果有就先询问是否继续添加
      // 如果没有就直接跳转到添加SPU页面
      console.log(LocalStorage.get(LocalStorage.KEY_ADD_SPU))
      if (LocalStorage.get(LocalStorage.KEY_ADD_SPU)) {
        this.$confirm('检测到您有未保存的SPU数据, 是否继续添加?', '提示', {
          confirmButtonText: '保持数据，继续添加',
          cancelButtonText: '清除数据，重新添加',
          type: 'warning'
        }).then(() => {
          this.$router.push('/spu/step1')
        }).catch(() => {
          LocalStorage.remove(LocalStorage.KEY_ADD_SPU)
          this.$router.push('/spu/step1')
        })
      } else {
        this.$router.push('/spu/step1')
      }
    }
  }
}
</script>

<style scoped>

</style>
